<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        select{
            font-size:27px;
            padding: 5px 10px 5px 10px;
        }
    </style>
    <script>
        var data = {
            '河南省': {
                '郑州市':['中原区', '二七区'],
                '洛阳市':['洛龙区','涧西区','老城区']
            },
            '山西省': {
                '太原市':{

                },
                '忻州市':{

                }
            }
        }
        function g(v){
            return document.getElementById(v)
        }
        window.onload = function(){
            //第一步渲染省
            var html1 = "<option value=''>请选择</option>"
            for(var i in data){
                html1 += '<option value="'+i+'">'+i+'</option>'
            }
            g('sheng').innerHTML = html1;

            //当选择省之后，渲染市
            g('sheng').onchange = function(){
                var name = this.value

                var html1 = ""
                for(var i in data[name]){
                    html1 += '<option value="'+i+'">'+i+'</option>'
                }
                g('shi').innerHTML = html1;
                g('xian').innerHTML = "";
            }

            //当选择市之后，渲染县区
            g('shi').onchange = function(){
                var sheng = g('sheng').value
                var shi   = this.value

                var html1 = ""
                for(var i in data[sheng][shi]){
                    html1 += '<option value="'+data[sheng][shi][i]+'">'+data[sheng][shi][i]+'</option>'
                }
                g('xian').innerHTML = html1;
            }

        }
    </script>
</head>
<body>
    <h1>三级联动</h1>
    <div id="msg">
        <select id="sheng"></select>
        <select id="shi"></select>
        <select id="xian"></select>
    </div>
</body>
</html>

